<template>
  <div class='content'>
   <div class="profile_page">
        <head-top  :head-title="profiletitle"></head-top>
    </div>
     <section name="fade">
         <!-- 首页 -->
          <section v-if="categoryType === 1">
                <div class="flex menuContain flex-warp">
                   <menu-item v-for='(menuData,key) in menuDatas' :key="key" :img-src='menuData.imgSrc' :link-url="menuData.linkUrl" :menu-title='menuData.menuTitle'> </menu-item>
                </div>

          </section>
     </section>
     <section name="fade">
          <!-- 我的 -->
          <section v-if="categoryType === 2">
              <div>
                <user-info></user-info>
                <section id="van-cell">
                    <van-cell @click="loginout">
                        <template slot="title">
                            <img src="@/assets/images/img/zhuxiao.png" class="align_middle" style="width:.8rem;" alt="">
                            <span class="custom-text align_middle" style="margin-left: 0.2rem;">注销</span>
                        </template>
                    </van-cell>
                    <van-cell>
                      <template slot="title">
                        <img src="@/assets/images/img/xiugai.png" class="align_middle" style="width:1.1rem;margin-left: -0.1rem" alt="">
                        <span class="custom-text align_middle" style="margin-left: 0">修改密码</span>
                      </template>
                    </van-cell>
                  <van-cell>
                    <template slot="title">
                      <img src="@/assets/images/img/oa.png" class="align_middle" style="width:1.1rem;margin-left: -0.1rem" alt="">
                      <span class="custom-text align_middle" style="margin-left: 0">OA账号维护</span>
                    </template>
                  </van-cell>
                </section>
              </div>


          </section>
     </section>
      <!--<section class="category_title">
        <div v-show="!ifThApp" class="home category" :class="{choosed: categoryType === 1}" @click="changeCategory(1,'首页')">
                <span class="icon"></span>
                <span>首页</span>
        </div>
        <div class="sign" :class="{signCenter:ifThApp==true}" @click="sign()">
            <img src="@/assets/images/img/sign.png" style="width:3rem" alt="" srcset="">
        </div>
         <div v-show="!ifThApp" class="mine category" :class="{choosed: categoryType === 2}" @click="changeCategory(2,'我的')">
                <span class="icon"></span>
                <span>我的</span>
        </div>
      </section>-->
      <div class="flex signContain" :class="{show: signShow === 1}" ref="signContain">
          <div class="signClose"  @click="signClose()">
              <img style="width:2.2rem" src="@/assets/images/img/signClose.png" alt="">
          </div>
          <div class="sign1">
              <img style="width:2.2rem" src="@/assets/images/img/sign1.png" alt="">
          </div>
          <div class="sign2">
              <img style="width:2.2rem" src="@/assets/images/img/sign2.png" alt="">
          </div>
      </div>
      <shadow-item class="shadowItem" :class="{show: signShow === 1}"></shadow-item>
  </div>

</template>

<script>
import headTop from '@/components/header/head'
import menuItem from '@/components/menuItem/menuItem'
import shadowItem from '@/components/shadow/shadow'
import userInfo from '@/components/userInfo/userInfo'
import {setStore,getStore,getDefault} from '@/assets/config/mUtils';
import {mapState, mapMutations} from 'vuex'
import {login,sysTime,getUser,dataOfTime,getCodeSetData,getMenu} from '@/service/getData';
import { Dialog,Toast } from 'vant';


export default {
    data(){
        return{
            profiletitle: '首页',
            categoryType:1, //首页与我的切换
            ifBirthday:false,
            ifFestival:false,
            festivalImg:'',
            signShow:0, //点击打卡按钮，0隐藏，1显示
            ifThApp:false,
            enterDay:"",//入职天数
            thisTime:"",
            company:"",//公司W-物业，S-商业
            name:"",//名字
            menuDatas:[
                {
                    imgSrc:require('@/assets/images/icon/daiban.png'),
                    menuTitle:'我的待办',
                    linkUrl:'/backlog',
                },
                {
                    imgSrc:require('@/assets/images/icon/weihu.png'),
                    menuTitle:'我的信息',
                    linkUrl:'/myInfo',
                },
                {
                  imgSrc:require('@/assets/images/icon/tongxunlu.png'),
                  menuTitle:'事项办理',
                  linkUrl:'/handlMatter'
                },
                {
                    imgSrc:require('@/assets/images/icon/xizi.png'),
                    menuTitle:'信息查询',
                    linkUrl:'/salary'
                },
                {
                  imgSrc:require('@/assets/images/icon/liucheng.png'),
                  menuTitle:'我的申请',
                  linkUrl:'/process'
                },
                {
                  imgSrc:require('@/assets/images/icon/message.png'),
                  menuTitle:'我的消息',
                  linkUrl:'/message'
                },
              {
                imgSrc:require('@/assets/images/icon/xiaoxi.png'),
                menuTitle:'绩效考评',
                linkUrl:'/evaluateAssess'
              },
	            {
		            imgSrc:require('@/assets/images/icon/xiaoxi.png'),
		            menuTitle:'胜任力考评',
		            linkUrl:'/competencyAssess'
	            },
            ]
        }
    },
     components:{
        headTop,
        menuItem,
        shadowItem,
        userInfo
    },
    computed: {
        ...mapState(["user_id"])
    },
    created(){
//      var userId = window.location.href.split('?')[1].split('#')[0].slice(11);
//      var userId = 'c7e4b510a07a4778a5560094e001c905';//测试5
      var userId = '76c91c0c49fe4ac1988cd03eaf3e7d9c';
      setStore('user_id',userId);
      var data = getDefault();
	    getMenu(data).then(res=>{
	    	console.log(res);
	    	var data = res.data;
	    	if(data.isJL =="00901"){
	    		this.menuDatas.push({
				    imgSrc:require('@/assets/images/icon/xiaoxi.png'),
				    menuTitle:'经理自助',
				    linkUrl:'/selfManage'
			    })
            };
            if(data.isLD =="00901"){
	            this.menuDatas.push({
		            imgSrc:require('@/assets/images/icon/xiaoxi.png'),
		            menuTitle:'总经理自助',
		            linkUrl:'/generalSelfManage'
	            })
            }
        });
      /*请求所有项目所用代码集*/
      this.SELECTPER({});
      this.SAVE_PLANID('');
      getCodeSetData({}).then(res => {
        console.log(res);
        var result = res.data;
        this.CODESET(result);
      })
    },
    mounted(){
     /* login().then(res=>{
        var userId = res.data.userId;
        console.log(res);
        setStore('user_id',userId);
        this.SAVE_USERID(userId);
      })*/

        // alert(this['user_id'])  //获取state里面的user_id
    },
    methods:{
        ...mapMutations([
                'SAVE_USERID',
                'CODESET',
                'SELECTPER',
                'SAVE_PLANID'
            ]),
        changeCategory(index,title){
            this.categoryType = index;
            this.profiletitle = title;
        },

        signClose(){
            this.signShow = 0;
        },

    }
}

</script>
<style lang="scss" scoped>
      @import '../../assets/style/mixin';
      @import '../../assets/style/public';
      .content{
          padding:.4rem;
          padding-top: calc(64px + .4rem);
      }

      .shadowItem,.signContain{
          display: none
      }
      .shadowItem.show,.signContain.show{
          display: block;
      }
      .menuContain{
          >div{
              @include wh(33%, 4.2rem);
              background:#fff;
              margin-bottom:.2rem;
             /* border-top:1px solid #e6e6e6;
              border-bottom:1px solid #e6e6e6;*/
              box-sizing:border-box;
          /*    margin-left: 1.2%;*/

          }
         >div:nth-of-type(4n+0){
            /*border-right:1px solid #e6e6e6;*/
         }
           >div:nth-of-type(4n+1){
           /* border-left:1px solid #e6e6e6;*/
         }
         >div:nth-last-of-type(1){
            /*  border-right:1px solid #e6e6e6;*/
         }
      }
      .category_title{
          display: flex;
            position: fixed;
            left: 0;
          	width: 100%;
            height: 2rem;
            bottom: 0;
            background-color: #ffffff;
            box-shadow: 0px 0px 10px 0px rgba(163, 163, 163, 0.25);
            justify-content: space-between;
            @include sc(.4rem,#9babbb);
            padding:0 1.44rem;
            box-sizing: border-box;
            >div.category{
                justify-content: center;
                width: 7rem;
              /*  align-items: center;*/
                display: flex;
                height: 100%;
                flex-direction:column;
                .icon{
                    display:block;
                    width: .88rem;
                    height: .88rem;
                    background: url('../../assets/images/img/home.png') no-repeat center center;
                    background-size: 100%;
                    margin-bottom: .1rem;
                }
                &.mine{
                  align-items: flex-end;
                    .icon{
                        background: url('../../assets/images/img/my.png') no-repeat center center;
                        background-size: .68rem;
                    }
                }
                &.choosed{
                     .icon{
                         background: url('../../assets/images/img/home1.png') no-repeat center center;
                        background-size:100%;
                    }
                    @include sc(.4rem,#5484ff);
                     &.mine{
                        .icon{
                            background: url('../../assets/images/img/my1.png') no-repeat center center;
                            background-size: .68rem;
                        }
                    }
                }
            }
           .sign{
               position: relative;
               bottom: 1.1rem;
               >img{
                box-shadow: 0px 2px 12px 0px rgba(94, 142, 239, 0.53);
                border-radius: 50%;
                display: block;
               }

           }
      }
      .signContain{
          width: 100%;
          justify-content: center;
          flex-direction: column-reverse;
          align-items: center;
          position: fixed;
          left: 0;
          bottom: 0.1rem;
          z-index: 1000;
          >div{
              width: 2.2rem;
              img{
                  display: block;
              }
          }
      }
      .sign1,.sign2{
          position: absolute;
          bottom: 0;
          left: calc(50% - 1.1rem);
          transition: .3s
      }
      .sign2{
           transition: .5s
      }
      .signClose{
          position: absolute;
          bottom: 0;
          z-index: 1;
          left: calc(50% - 1.1rem);
      }
    .show{
        .sign1{
           animation: moveup1 .5s;
            animation-fill-mode: forwards;
            &::after{
                content: '签到';
                position:absolute;
                right: -1.5rem;
                bottom: .8rem;
                @include sc(.5rem,#666);
            }
        }
        .sign2{
             animation: moveup2 .8s;
            animation-fill-mode: forwards;
            &::after{
                content: '签退';
                position:absolute;
                right: -1.5rem;
                bottom: .8rem;
                @include sc(.5rem,#666);
            }
        }
    }
        @keyframes moveup1 {
            0% {
                bottom: 0;
            }
            100%{
                bottom: 2.3rem;
            }

        }
        @keyframes moveup2 {
                    0% {
                        bottom: 0;
                    }
                    100%{
                        bottom: 4.6rem;
                    }

        }
    #van-cell{
        margin-top: 7.4rem;
    }
    .van-cell .custom-text{
        color: #333;
        font-size: .6rem;
        margin-left: 1rem;
    }
      .head_goback{
        width: 0.6rem;
        height: 1rem;
        line-height: 2.2rem;
        margin-top: 0.4rem;
        padding: 0 3rem;
        margin-left: -3rem;
        position: fixed;
        left: 1rem;
        top: 0.4rem;
        z-index: 999;
      }
  .birth{
    position: absolute;
    width:15.2rem;
    height: 22rem;
    left: 50%;
    top: 50%;
    z-index: 99999;
    margin-top: -11rem;
    margin-left: -7.6rem;
    .blessing{
      position: absolute;
      top: 8rem;
      width: 100%;
      left: 0;
      padding: 0 1rem;
      box-sizing: border-box;
      p{
        color: #ffffff;
        font-size: .7rem;
        line-height: 1.5;
        margin-bottom: 0.8rem;
      }
      .blessEnd{
        text-align: right;
      }
    }
    img{
      width: 100%;
    }
    span{
      position: absolute;
      top: 6px;
      right: -11px;
      width: 60px;
      height: 60px;
      background: url("../../assets/images/img/closeImg.png") no-repeat;
      background-size: 42px;
    }
  }
      @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
        .content{
          padding:.4rem;
          padding-top: calc(84px + .4rem);
        }
        .category_title{
          bottom: 34px;
        }
      }
      @media only screen and (device-width: 414px) and (device-height: 896px){
        .content{
          padding:.4rem;
          padding-top: calc(84px + .4rem);
        }
        .category_title{
          bottom: 34px;
        }
      }
  .signCenter{
    left: 5rem;
  }
</style>



